<template>
	<view>
		<view class="box">
			<view class="search_box">
				<view class="flex_box aic">
					<view class="re item">
						<image :lazy-load="true" src="/static/icon_search.png" class="icon_search_pos"></image>
						<input type="text" class="ipt_search" v-model="keyword" placeholder="请输入您想搜索的挖机型号"
							placeholder-style="color: #353535" @confirm='searchConfirm' />
					</view>
					<view class="pl15 fs30 cor_333" @tap="searchKeywordConfirm">搜索</view>

					<view class="pl15 fs30 cor_333" @tap="cancel">取消</view>
				</view>
			</view>
			<view class="menu_content_box_page">
				<view class="pl30 pr30">
					<!-- 搜索历史 -->
					<view class="mt35">
						<view class="pl25 flex_box aic">
							<view class="item">
								<view class="fs30 fwb cor_333">搜索历史</view>
							</view>
							<!--             <image src="/static/icon_refresh.png" class="img5"></image>               <i<imagec="/static/icon_delete.png" class="ml25 img5"></image> -->
						</view>
						<view class="pt10">
							<view class="df fldr fw">
								<view class="lable_box_1" @tap="searchThis(item)" v-for="item, index in searchLog"
									:key="index">{{item}}</view>
							</view>
						</view>
					</view><!-- 搜索历史 -->

					<!-- 你可能感兴趣 -->
					<!--      <view class="mt50 pt5">
            <view class="pl25 flex_box aic">
              <view class="item"><view class="fs30 fwb cor_333">你可能感兴趣</view></view>
            </view>
            <view class="pt10">
              <view class="df fldr fw">
                <view class="lable_box_2">大挖掘机</view>
                <view class="lable_box_2">小挖机</view>
                <view class="lable_box_2">大挖掘机</view>
                <view class="lable_box_2">小挖机</view>
                <view class="lable_box_2">大挖机</view>
                <view class="lable_box_2">大挖掘机</view>
              </view>
            </view>
          </view> -->
					<!-- 你可能感兴趣 -->

				</view>
			</view>
		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		diggerHistoryApi,
		getUserInfoApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				searchLog: [
					'大挖掘机',
					'小挖掘机',
					'波多野结衣'
				],
				interest: [
					'苍井空',
					'波多野结衣'
				],
				userId: uni.getStorageSync('userId'),
				keyword: ''
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync('userId')) {
				uni.navigateBack({
					delta: 1
				})
			}
			console.log(options);
			//plus.screen.lockOrientation('portrait-primary'); //锁定应用竖屏
			this.diggerHistory();
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				let that = this;
				getUserInfoApi({
					userId: uni.getStorageSync('userId')
				}).then(res => {
					if (!res.data.beCompleteInfo) {
						uni.navigateTo({
							url: '/pages/personal_information/personal_information'
						})
					}
				}).catch(err => {})
			},
			diggerHistory() {
				let that = this;
				showLoading();
				diggerHistoryApi({
					userId: this.userId
				}).then(res => {
					that.searchLog = res.data
					hideLoading();
				}).catch(err => {
					hideLoading();
					toast(err.msg);
				})
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			searchConfirm(e) {
				uni.navigateTo({
					url: '/pages/car_search_results/car_search_results?keywords=' + (e.detail.value == undefined ||
						!e.detail.value) ? e.detail.value : ''
				})
			},
			searchKeywordConfirm() {
				uni.navigateTo({
					url: '/pages/car_search_results/car_search_results?keywords=' + this.keyword
				})
			},
			searchThis(keywords) {
				uni.navigateTo({
					url: '/pages/car_search_results/car_search_results?keywords=' + keywords
				})
			}
		}
	}
</script>

<style>
	.search_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 85rpx 24rpx 25rpx;
		background-color: #fff;
		z-index: 3;
	}

	.menu_content_box_page {
		position: relative;
		/* height: calc(100vh - 179rpx); */
		background-color: #fff;
		padding-top: 179rpx;
	}

	.ipt_search {
		display: inline-block;
		width: 100%;
		padding: 0 15rpx 0 88rpx;
		height: 69rpx;
		line-height: 69rpx;
		font-size: 26rpx;
		text-align: left;
		color: #000;
		background-color: #F4F2F2;
		outline: none;
		border: none;
		vertical-align: top;
		border-radius: 35rpx;
	}

	.icon_search_pos {
		position: absolute;
		top: 21rpx;
		left: 46rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}

	.lable_box_1,
	.lable_box_2 {
		padding: 0 22rpx;
		height: 54rpx;
		line-height: 54rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		margin-left: 24rpx;
		margin-top: 24rpx;
	}

	.lable_box_1 {
		color: #666;
		background-color: #f5f5f5;
	}

	.lable_box_2 {
		color: #FF2A2A;
		background-color: #FBEBEC;
	}
</style>
